package com.sy.musicapp.ui.home

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Pause
import androidx.compose.material.icons.rounded.PlayArrow
import androidx.compose.material.icons.rounded.QueueMusic
import androidx.compose.material.icons.rounded.SkipNext
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import coil.compose.rememberImagePainter
import com.sy.musicapp.R
import com.sy.musicapp.model.MusicViewModel
import com.sy.musicapp.ui.common.keepSquare
import com.sy.musicapp.ui.common.noRippleClickable
import com.sy.musicapp.ui.theme.Global
import com.sy.musicapp.ui.theme.MusicAppTheme

/**
 * 小播放器
 * @param onClick 组件被点击
 * @author SY
 * @since 2022-02-01 21:59
 **/
@ExperimentalAnimationApi
@Composable
fun LittlePlayControl(
    musicModel: MusicViewModel,
    onClick: () -> Unit
) {
    val iconScale = 1f
    val isPlay by musicModel.isPlay.collectAsState()
    val isControlShow by musicModel.isLittleControlShow.collectAsState()
    val currentPlay by musicModel.currentMusic.collectAsState()
    AnimatedVisibility(
        visible = isControlShow,
        enter = slideInVertically(initialOffsetY = { 400 }),
        exit = slideOutVertically(targetOffsetY = { 400 }),
        modifier = Modifier.zIndex(1f)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .background(Global.colors.primary, Global.shapes.large)
                .height(50.dp)
                .fillMaxWidth(1f)
                .padding(3.dp)
                .noRippleClickable { onClick() }
        ) {
            Image(
                painter = rememberImagePainter(
                    data = currentPlay.picUrl,
                    builder = {
                        placeholder(R.drawable.keli)
                        crossfade(true)
                        error(R.drawable.keli)
                    }),
                contentDescription = "Album",
                modifier = Modifier
                    .keepSquare()
                    .clip(CircleShape)
            )

            Text(
                text = currentPlay.name,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1,
                color = Global.colors.onPrimary,
                modifier = Modifier
                    .padding(start = 10.dp)
                    .weight(0.55f)
            )
            IconButton(onClick = {
                musicModel.playStateChange()
            }) {
                Icon(
                    imageVector = if (isPlay)
                        Icons.Rounded.Pause
                    else
                        Icons.Rounded.PlayArrow,
                    contentDescription = null,
                    modifier = Modifier.scale(iconScale),
                    tint = Global.colors.onPrimary
                )
            }
            IconButton(onClick = {
                musicModel.completed()
            }) {
                Icon(
                    imageVector = Icons.Rounded.SkipNext,
                    contentDescription = null,
                    modifier = Modifier.scale(iconScale),
                    tint = Global.colors.onPrimary
                )
            }
            IconButton(onClick = {
                musicModel.musicListShowChange()
            }) {
                Icon(
                    imageVector = Icons.Rounded.QueueMusic,
                    contentDescription = null,
                    modifier = Modifier.scale(iconScale),
                    tint = Global.colors.onPrimary
                )
            }
        }
    }
}

@ExperimentalAnimationApi
@Preview // use ViewModel cause Preview cannot work
@Composable
fun LittleControl() {
    MusicAppTheme {
        LittlePlayControl(MusicViewModel(), {})
    }
}

@ExperimentalAnimationApi
@Preview
@Composable
fun LittleControlDark() {
    MusicAppTheme(darkTheme = true) {
        LittlePlayControl(MusicViewModel(), {})
    }
}

